import React from "react";

import { uniqueId } from "lodash";

const EmptyPacks = () => {
  const clipPathId = uniqueId("clip-path-");
  const maskId = uniqueId("mask-");
  const filterId = uniqueId("filter-");

  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="322"
      height="176"
      fill="none"
    >
      <g clipPath={`url(#${clipPathId})`}>
        <path
          fill="#F1F0FF"
          d="M162.5 176c41.421 0 75-33.579 75-75s-33.579-75-75-75-75 33.579-75 75 33.579 75 75 75Z"
        />
        <g filter={`url(#${filterId})`}>
          <path
            fill="#fff"
            d="M313 61H9a8 8 0 0 0-8 8v64a8 8 0 0 0 8 8h304a8 8 0 0 0 8-8V69a8 8 0 0 0-8-8Z"
          />
          <path
            stroke="#C5C7D1"
            d="M313 60.5H9A8.5 8.5 0 0 0 .5 69v64a8.5 8.5 0 0 0 8.5 8.5h304a8.5 8.5 0 0 0 8.5-8.5V69a8.5 8.5 0 0 0-8.5-8.5Z"
          />
        </g>
        <path
          fill="#fff"
          stroke="#C5C7D1"
          d="M21 100.5h-4a3.5 3.5 0 0 0-3.5 3.5v4a3.5 3.5 0 0 0 3.5 3.5h4a3.5 3.5 0 0 0 3.5-3.5v-4a3.5 3.5 0 0 0-3.5-3.5ZM21 120.5h-4a3.5 3.5 0 0 0-3.5 3.5v4a3.5 3.5 0 0 0 3.5 3.5h4a3.5 3.5 0 0 0 3.5-3.5v-4a3.5 3.5 0 0 0-3.5-3.5Z"
        />
        <path fill="#C5C7D1" d="M154 103H40a3 3 0 1 0 0 6h114a3 3 0 1 0 0-6Z" />
        <path
          fill="#E2E4EA"
          d="M78 123H40a3 3 0 1 0 0 6h38a3 3 0 1 0 0-6ZM142 123H88a3 3 0 1 0 0 6h54a3 3 0 1 0 0-6Z"
        />
        <path fill="#D9D9FE" d="M294 103h-52a3 3 0 1 0 0 6h52a3 3 0 1 0 0-6Z" />
        <path fill="#F1F0FF" d="M294 123h-52a3 3 0 1 0 0 6h52a3 3 0 1 0 0-6Z" />
        <path fill="#C5C7D1" d="M224 103h-52a3 3 0 1 0 0 6h52a3 3 0 1 0 0-6Z" />
        <path fill="#E2E4EA" d="M212 123h-40a3 3 0 1 0 0 6h40a3 3 0 1 0 0-6Z" />
        <path
          fill="#F9FAFC"
          stroke="#C5C7D1"
          d="M321 91.5h.5V69a8.5 8.5 0 0 0-8.5-8.5H9A8.5 8.5 0 0 0 .5 69v22.5H321Z"
        />
        <path
          fill="#fff"
          stroke="#C5C7D1"
          d="M21 70.5h-4a3.5 3.5 0 0 0-3.5 3.5v4a3.5 3.5 0 0 0 3.5 3.5h4a3.5 3.5 0 0 0 3.5-3.5v-4a3.5 3.5 0 0 0-3.5-3.5Z"
        />
        <path
          fill="#8B8FA2"
          d="M37.77 79v-7.05h.96l3.79 4.92v-4.92h1.19V79h-.95l-3.8-4.94V79h-1.19Zm8.97.1c-.353 0-.67-.067-.95-.2a1.723 1.723 0 0 1-.65-.56 1.407 1.407 0 0 1-.23-.79c0-.36.094-.643.28-.85.187-.213.49-.367.91-.46.42-.093.984-.14 1.69-.14h.35v-.21c0-.333-.073-.573-.22-.72-.146-.147-.393-.22-.74-.22-.273 0-.553.043-.84.13-.286.08-.576.207-.87.38l-.36-.85c.174-.12.377-.223.61-.31.24-.093.49-.163.75-.21.267-.053.517-.08.75-.08.714 0 1.244.167 1.59.5.347.327.52.837.52 1.53V79h-1.17v-.78a1.39 1.39 0 0 1-.54.65c-.246.153-.54.23-.88.23Zm.26-.86c.327 0 .597-.113.81-.34.22-.227.33-.513.33-.86v-.22h-.34c-.626 0-1.063.05-1.31.15a.516.516 0 0 0-.36.52c0 .22.077.4.23.54.154.14.367.21.64.21Zm3.62.76v-4.89h1.22v.75c.14-.26.352-.475.61-.62.26-.153.56-.23.9-.23.733 0 1.213.32 1.44.96.153-.3.373-.533.66-.7.286-.173.613-.26.98-.26 1.1 0 1.65.67 1.65 2.01V79h-1.25v-2.93c0-.373-.064-.647-.19-.82-.12-.173-.327-.26-.62-.26-.327 0-.584.117-.77.35-.187.227-.28.543-.28.95V79h-1.25v-2.93c0-.373-.064-.647-.19-.82-.12-.173-.324-.26-.61-.26-.327 0-.584.117-.77.35-.187.227-.28.543-.28.95V79h-1.25Zm11.159.1c-.554 0-1.03-.103-1.43-.31-.4-.207-.71-.5-.93-.88-.214-.38-.32-.83-.32-1.35 0-.507.103-.95.31-1.33.213-.38.503-.677.87-.89.373-.22.796-.33 1.27-.33.693 0 1.24.22 1.64.66.406.44.61 1.04.61 1.8v.37h-3.5c.093.873.593 1.31 1.5 1.31.273 0 .546-.04.82-.12a2.33 2.33 0 0 0 .75-.4l.35.84c-.261.208-.56.364-.88.46-.354.113-.707.17-1.06.17Zm-.18-4.24c-.367 0-.664.113-.89.34-.227.227-.364.533-.41.92h2.46c-.027-.407-.14-.717-.34-.93-.194-.22-.467-.33-.82-.33Zm113.241 6.27-.97-1.57c-.193-.307-.51-.46-.95-.46-.68 0-1.273-.15-1.78-.45-.507-.3-.9-.72-1.18-1.26-.28-.547-.42-1.187-.42-1.92 0-.74.14-1.38.42-1.92.28-.54.673-.957 1.18-1.25.507-.3 1.103-.45 1.79-.45s1.283.15 1.79.45c.507.293.9.71 1.18 1.25.28.54.42 1.177.42 1.91 0 .8-.167 1.487-.5 2.06-.327.573-.78.993-1.36 1.26.287.093.533.317.74.67l.73 1.16-1.09.52ZM172.93 78c.647 0 1.15-.223 1.51-.67.36-.447.54-1.067.54-1.86 0-.8-.18-1.42-.54-1.86-.353-.44-.857-.66-1.51-.66-.647 0-1.15.22-1.51.66-.36.44-.54 1.06-.54 1.86 0 .793.18 1.413.54 1.86.36.447.863.67 1.51.67Zm6.342 1.1c-1.2 0-1.8-.673-1.8-2.02v-2.97h1.25v2.99c0 .347.07.603.21.77.14.167.363.25.67.25.333 0 .606-.113.82-.34.213-.233.32-.54.32-.92v-2.75h1.25V79h-1.22v-.73c-.327.553-.827.83-1.5.83Zm6.431 0c-.554 0-1.03-.103-1.43-.31-.4-.207-.71-.5-.93-.88-.214-.38-.32-.83-.32-1.35 0-.507.103-.95.31-1.33a2.32 2.32 0 0 1 .87-.89c.373-.22.796-.33 1.27-.33.693 0 1.24.22 1.64.66.406.44.61 1.04.61 1.8v.37h-3.5c.093.873.593 1.31 1.5 1.31.273 0 .546-.04.82-.12.273-.087.523-.22.75-.4l.35.84c-.261.208-.56.364-.88.46-.342.111-.7.169-1.06.17Zm-.18-4.24c-.367 0-.664.113-.89.34-.227.227-.364.533-.41.92h2.46c-.027-.407-.14-.717-.34-.93-.194-.22-.467-.33-.82-.33Zm3.19 4.14v-4.89h1.22v.86c.24-.58.753-.9 1.54-.96l.38-.03.08 1.06-.72.07c-.82.08-1.23.5-1.23 1.26V79h-1.27Zm3.836-5.94v-1.22h1.4v1.22h-1.4Zm.08 5.94v-4.89h1.25V79h-1.25Zm4.958.1c-.553 0-1.03-.103-1.43-.31-.4-.207-.71-.5-.93-.88-.213-.38-.32-.83-.32-1.35 0-.507.104-.95.31-1.33.214-.38.504-.677.87-.89.374-.22.797-.33 1.27-.33.694 0 1.24.22 1.64.66.407.44.61 1.04.61 1.8v.37h-3.5c.094.873.594 1.31 1.5 1.31.274 0 .547-.04.82-.12.274-.087.524-.22.75-.4l.35.84c-.261.208-.56.365-.88.46a3.45 3.45 0 0 1-1.06.17Zm-.18-4.24c-.366 0-.663.113-.89.34-.226.227-.363.533-.41.92h2.46c-.026-.407-.14-.717-.34-.93-.193-.22-.466-.33-.82-.33Zm4.98 4.24c-.413 0-.8-.05-1.16-.15-.36-.1-.66-.243-.9-.43l.32-.82a3.08 3.08 0 0 0 1.75.52c.32 0 .557-.053.71-.16.16-.113.24-.26.24-.44 0-.28-.206-.46-.62-.54l-1-.19c-.846-.16-1.27-.6-1.27-1.32 0-.32.087-.597.26-.83a1.73 1.73 0 0 1 .74-.54c.314-.127.674-.19 1.08-.19.347 0 .68.05 1 .15.32.093.594.237.82.43l-.34.82a2.184 2.184 0 0 0-.7-.38 2.322 2.322 0 0 0-.77-.14c-.326 0-.57.057-.73.17a.533.533 0 0 0-.23.45c0 .293.19.473.57.54l1 .19c.434.08.76.227.98.44.227.213.34.5.34.86 0 .487-.19.87-.57 1.15-.38.273-.886.41-1.52.41Zm37.383-.1v-7.05h1.28v2.94h3.63v-2.94h1.28V79h-1.28v-3.04h-3.63V79h-1.28Zm9.844.1c-.506 0-.946-.103-1.32-.31a2.177 2.177 0 0 1-.87-.88c-.206-.387-.31-.84-.31-1.36 0-.52.104-.97.31-1.35.207-.38.497-.673.87-.88.374-.207.814-.31 1.32-.31.507 0 .947.103 1.32.31.374.207.664.5.87.88.207.38.31.83.31 1.35 0 .52-.103.973-.31 1.36-.198.372-.5.678-.87.88-.373.207-.813.31-1.32.31Zm0-.95c.374 0 .674-.133.9-.4.227-.273.34-.673.34-1.2 0-.533-.113-.93-.34-1.19-.226-.267-.526-.4-.9-.4-.373 0-.673.133-.9.4-.226.26-.34.657-.34 1.19 0 .527.114.927.34 1.2.227.267.527.4.9.4Zm5.322.95c-.413 0-.8-.05-1.16-.15-.36-.1-.66-.243-.9-.43l.32-.82c.247.167.523.297.83.39.307.087.613.13.92.13.32 0 .557-.053.71-.16.16-.113.24-.26.24-.44 0-.28-.207-.46-.62-.54l-1-.19c-.847-.16-1.27-.6-1.27-1.32 0-.32.087-.597.26-.83a1.73 1.73 0 0 1 .74-.54c.313-.127.673-.19 1.08-.19.347 0 .68.05 1 .15.32.093.593.237.82.43l-.34.82a2.192 2.192 0 0 0-.7-.38 2.325 2.325 0 0 0-.77-.14c-.327 0-.57.057-.73.17a.539.539 0 0 0-.23.45c0 .293.19.473.57.54l1 .19c.433.08.76.227.98.44.227.213.34.5.34.86 0 .487-.19.87-.57 1.15-.38.273-.887.41-1.52.41Zm5.284 0c-1.293 0-1.94-.64-1.94-1.92v-2.13h-.94v-.94h.94v-1.46h1.25v1.46h1.48v.94h-1.48v2.06c0 .32.07.56.21.72.14.16.367.24.68.24.093 0 .19-.01.29-.03.1-.027.203-.053.31-.08l.19.92c-.12.067-.273.12-.46.16-.18.04-.357.06-.53.06Zm3.388 0c-.413 0-.8-.05-1.16-.15-.36-.1-.66-.243-.9-.43l.32-.82c.247.167.523.297.83.39.307.087.613.13.92.13.32 0 .557-.053.71-.16.16-.113.24-.26.24-.44 0-.28-.207-.46-.62-.54l-1-.19c-.847-.16-1.27-.6-1.27-1.32 0-.32.087-.597.26-.83a1.73 1.73 0 0 1 .74-.54c.313-.127.673-.19 1.08-.19.347 0 .68.05 1 .15.32.093.593.237.82.43l-.34.82a2.192 2.192 0 0 0-.7-.38 2.325 2.325 0 0 0-.77-.14c-.327 0-.57.057-.73.17a.539.539 0 0 0-.23.45c0 .293.19.473.57.54l1 .19c.433.08.76.227.98.44.227.213.34.5.34.86 0 .487-.19.87-.57 1.15-.38.273-.887.41-1.52.41Z"
        />
        <path fill="#C5C7D1" d="M161.5 44h1v17h-1V44Z" />
        <path
          fill="#D66C7B"
          d="M162.5 48c13.255 0 24-10.745 24-24s-10.745-24-24-24-24 10.745-24 24 10.745 24 24 24Z"
        />
        <mask
          id={maskId}
          width={24}
          height={24}
          x={151}
          y={12}
          maskUnits="userSpaceOnUse"
          style={{
            maskType: "luminance",
          }}
        >
          <path fill="#fff" d="M151 12h24v24h-24V12Z" />
        </mask>
        <g fill="#fff" mask={`url(#${maskId})`}>
          <path d="M173.658 24.15v-9L162.329 12 151 15.3v16.35l11.329 3.3.596-.3c1.193.75 2.684 1.35 4.323 1.35 4.174 0 7.752-3.45 7.752-7.65-.149-1.65-.596-3-1.342-4.2Zm-10.434-4.5 8.646-2.55v5.1a7.674 7.674 0 0 0-4.771-1.65c-1.341 0-2.683.45-3.875 1.2v-2.1Zm6.26-3.75-7.155 2.1-7.155-2.1 7.155-2.1 7.155 2.1Zm-16.695 1.2 8.646 2.55v3.6a7.712 7.712 0 0 0-1.938 5.1c0 1.65.447 3 1.342 4.35l-8.05-2.25V17.1Zm14.31 17.1c-3.279 0-5.962-2.7-5.962-5.85 0-3.3 2.683-5.85 5.962-5.85 3.28 0 5.963 2.7 5.963 5.85 0 3.15-2.683 5.85-5.963 5.85Z" />
          <path d="M169.45 28.35h-1.35V25.5c0-.45-.45-.9-.9-.9s-.9.3-.9.9V30h3.15c.45 0 .9-.45.9-.9s-.3-.75-.9-.75Z" />
        </g>
      </g>
      <defs>
        <clipPath id={clipPathId}>
          <path fill="#fff" d="M0 0h322v176H0z" />
        </clipPath>
        <filter
          id={filterId}
          width={328}
          height={92}
          x={-3}
          y={60}
          colorInterpolationFilters="sRGB"
          filterUnits="userSpaceOnUse"
        >
          <feFlood floodOpacity={0} result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            result="hardAlpha"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          />
          <feOffset dy={7} />
          <feGaussianBlur stdDeviation={1.5} />
          <feColorMatrix values="0 0 0 0 0.0980392 0 0 0 0 0.129412 0 0 0 0 0.278431 0 0 0 0.1 0" />
          <feBlend
            in2="BackgroundImageFix"
            result="effect1_dropShadow_163_1926"
          />
          <feBlend
            in="SourceGraphic"
            in2="effect1_dropShadow_163_1926"
            result="shape"
          />
        </filter>
      </defs>
    </svg>
  );
};

export default EmptyPacks;
